<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        #title{
            height: 50px;
            background-color: #3366cc;
            color: antiquewhite;
            font-size: 30px;
            line-height: 50px;
            text-align: center;
        }
        .box{
            height: 50px;
            margin: 15px 25px;
            border-radius: 10px;
            font-size: 30px;
            line-height: 50px;
        }  
        
        #count{
            background-color: #3366cc;
            text-align: center;
            color: antiquewhite;
            cursor: pointer;
            
        }
        .num{
            height: 40px;
            margin: 10px 20px;
            /*border: solid 2px gray;*/
            padding: 0 15px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            z-index: 5;
        }
        .jj{
            height: 45px;
            width: 99%;
            border: solid 1px gray;
            /*margin: 10px 20px;*/
            border-radius: 5px;
            font-size: 16px;
            line-height: 45px;
        }
        .jj:focus{
            box-shadow: 0px 0px 5px darkblue inset;
        }
        .gai{
            background-color: white;
            position: absolute;
            width: 100%;
            height: 600px;

            
        }
        .y{
            color: red;
        }

    </style>
    
</head>
<body>
    <div id="title">工资计算器</div>

    <div id="top" class="box">
        <input id="jiben" class="jj" type="text" placeholder="基本工资" oninput="count(event)">
    </div>
    <div id="middle" class="box">
        <input id="jixiao" class="jj" type="text" placeholder="绩效工资" oninput="count(event)">
    </div>
    <div id="under" class="box">
        <input id="jiangjin" class="jj" type="text" placeholder="奖金" oninput="count(event)">
    </div>

    <div id="count" class="box" onclick="conClick()">计算</div>

    <div>
        <div id="word"></div>
        <div class="num">
            <div class="z">总工资</div>
            <div class="y" id="zgz">00</div>
        </div>
            <hr>
        
        
        <div class="num">
             <div class="z">养老8%</div>
            <div class="y" id="yl">00</div>
        </div>
        <div class="num">
             <div class="z">医疗2%</div>
            <div class="y" id="yil">00</div>
        </div>
        <div class="num">
             <div class="z">失业0.5%</div>
            <div class="y" id="sy">00</div>
        </div>
        <div class="num">
             <div class="z">工伤0%</div>
            <div class="y" id="gs">00</div>
        </div>
        <div class="num">
             <div class="z">公积金8%</div>
            <div class="y" id="gjj">00</div>
        </div>
        <div class="num">
             <div class="z">税前工资</div>
            <div class="y" id="sqgz">00</div>
        </div>
        <div class="num">
             <div class="z">个人所得税</div>
            <div class="y" id="grsds">00</div>
        </div>
        <hr>
        <div class="num">
             <div class="z">税后工资</div>
            <div class="y" id="shgz">00</div>
        </div>
       
    </div>
    <script>
        var jiben=document.getElementById("jiben");
        var jixiao=document.getElementById("jixiao");
        var jiangjin=document.getElementById("jiangjin");

        var con=document.getElementById("count");
        var word=document.getElementById("word");
        

            var zgz=document.getElementById("zgz");
            var yl=document.getElementById("yl");
            var yil=document.getElementById("yil");
            var sy=document.getElementById("sy");
            var gs=document.getElementById("gs");
            var gjj=document.getElementById("gjj");
            var sqgz=document.getElementById("sqgz");
            var grsds=document.getElementById("grsds");
            var shgz=document.getElementById("shgz");

        
        
        con.style.backgroundColor ="grey";
        word.classList.add("gai");
        function conClick(){
            count()
            if(a<=3500){
                // con.style.backgroundColor ="grey";
                // con.setAttribute("disable");
                // alert("您的工资小于等于3500元，我们无法计算");
            }else{
                word.classList.remove("gai");
                con.style.backgroundColor ="#3366cc";
            }
        }      
        
        var a=0;
        var g=0;
        var more=0;
        function count(){
            zgz.textContent=jiben.value*1+jixiao.value*1+jiangjin.value*1;
            a=zgz.textContent;
            console.log(a);
            zgz.textContent="￥"+(a*1).toFixed(2);
    
            yl.textContent="￥"+(a*0.08).toFixed(2);
            yil.textContent="￥"+(a*0.02).toFixed(2);
            sy.textContent="￥"+(a*0.005).toFixed(2);
            gs.textContent="￥"+(a*0).toFixed(2);
            gjj.textContent="￥"+(a*0.08).toFixed(2);
            sqgz.textContent=a-a*0.08-a*0.02-a*0.005-a*0-a*0.08;
            g=sqgz.textContent;
            sqgz.textContent="￥"+(g*1).toFixed(2);

            if(a<3500){
                con.style.backgroundColor ="grey";
                word.classList.add("gai");
                
            }else{
                con.style.backgroundColor ="#3366cc";
                // word.classList.remove("gai");
                
            }
            

            if (g<=3500)
            {
                grsds.textContent=0;
            }
            // else
            // {
            more =g-3500;
            if(more<=1500){
                more= more*0.03;
            }
            if(more<=4500&&more>=1500){
                more= more*0.1-105;
            }
            if(more<=9000&&more>=4500){
                more= more*0.2-555;
            }
            if(more<=35000&&more>=9000){
                more= more*0.25-1005;
            }
            if(more<=55000&&more>=35000){
                more= more*0.30-2755;
            }
            if(more<=80000&&more>=55000){
                more= more*0.35-5505;
            }
            if(more>=80000){
                more= more*0.45-13505;
            }
            grsds.textContent="￥"+more.toFixed(2);
            
            shgz.textContent="￥"+(g-more).toFixed(2);
            
            }
        // }
      
            
        
        
    </script>
</body>
</html>